<template>
  <h2>count:{{ Statee.count }}</h2>
  <h2>doublecount:{{ Statee.double }}</h2>
  <h2>name:{{ Statee.name }}</h2>
  <h2>age:{{ Statee.age }}</h2>
  <h2>isAdmin:{{ Statee.isAdmin }}</h2>
  <h2>数组:{{ Statee.items }}</h2>
  <button @click="Statee.increment">+</button>
  <hr>
  <button @click="plus">直接state++</button>
  <button @click="rest">重置state</button>
  <button @click="patch">批量修改数据</button>
  <button @click="array">数组修改</button>
  <button @click="changeall">直接替换state</button>

</template>

<script setup>
import {useStatee} from "@/stores/Stateexample";

const Statee = useStatee()
const plus = (() => {
  Statee.count++
})
const rest = (() => {
  Statee.$reset()
})
const patch = (() => Statee.$patch({
  count: Statee.count + 1,
  age: 120,
  name: 'zzu电子商务',
  items: [{name: 'shoes', quantity: 1}]
}))
const array = (() => Statee.$patch((state) => {
  // console.log(state.items.push({ name: 'hat', quantity: 9}))
  state.items.push({name: 'hat', quantity: 9})

}))
const changeall = (() => {
  Statee.$state = {count: 24}
})
Statee.$subscribe((mutation, state) => {
  // import { MutationType } from 'pinia'
  mutation.type// 'direct' | 'patch object' | 'patch function'

  mutation.storeId // store 的唯一标识符
  // 只有 mutation.type === 'patch object'的情况下才可用
  mutation.payload // 传递给 $patch 的参数

  // 每当状态发生变化时，将整个 state 持久化到本地存储。
  localStorage.setItem('state', JSON.stringify(state))

  if (mutation.type === 'direct') {
    console.log(`直接操作state${mutation.storeId}`)
  } else if (mutation.type === 'patch object') {
    console.log(`${mutation.storeId}使用patch函数对象更新了状态：`, mutation.payload)
  } else if (mutation.type === 'patch function') {
    console.log(`${mutation.storeId}使用pinia内部函数对象更新了状态`)
  }
  console.log(`mutation storeId: ${mutation.storeId}`)
      , {detached: true}
})

</script>

<style scoped>

</style>